<template>
  <div class="header">
    <!-- 折叠图片 -->
    <div class="collapse-btn" @click="collapseChange">
      <i class="el-icon-menu"></i>
    </div>
    <div class="logo">music后台管理</div>
    <div class="header-right">
      <div class="user-avator">
        <img :src="sAdmin.avatar"/>
      </div>
      <el-dropdown class="user-name" trigger="click" >
                <span class="el-dropdown-link">
                    {{sAdmin.username}}
                    <i class="el-icon-caret-bottom"></i>
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="avatar">上传头像</el-dropdown-item>
          <el-dropdown-item @click.native="openUpdateDialog">修改密码</el-dropdown-item>
          <el-dropdown-item >
           <span @click="logout">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- 修改头像弹窗 -->
    <el-dialog title="上传头像" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="addForm" >
        <!--头像-->
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="true"
          :multiple="true"
          :auto-upload="false"
          :on-change="handleChange"
          :file-list="fileList"
          list-type="picture-card"
         >
          <img v-if="form.avatar" :src="form.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForms">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改密码弹窗 -->
    <el-dialog title="修改密码" :visible.sync="updatePwdDialogFormVisible" width="30%">
      <el-form ref="addForm" >
        <el-form-item label="旧密码" >
          <el-input v-model="formPwd.oldPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" >
          <el-input v-model="formPwd.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" >
          <el-input v-model="formPwd.confirmPassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatePwdDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFormPwd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bus from "../assets/js/bus";
import {updatePwd, uploadAvatar} from "../api";

export default {
  data(){
    return{
      collapse: false,
      form:{},
      formPwd: {
        oldPassword: '',
        password: '',
        confirmPassword:'',
      },
      dialogFormVisible:false,//默认不展示
      updatePwdDialogFormVisible:false,
      fileList:[],
      addForm: {
        file: '',
        id:''
      },
      sAdmin:localStorage.getItem("sAdmin")?JSON.parse(localStorage.getItem("sAdmin")):{} ,//从浏览器里取数据，
    }
  },

  methods:{
    //侧边栏折叠
    collapseChange(){
      this.collapse = !this.collapse;
      bus.$emit('collapse',this.collapse);
    },
    //退出
    logout(){
      this.$router.push("/");
      localStorage.removeItem("sAdmin")
      this.$message.success("退出成功")
    },
    //上传头像
    // 阻止upload的自己上传，进行再操作
    handleChange(file, fileList) {
      console.log(file.name)
      this.addForm.file = file.raw;
      this.addForm.id = this.sAdmin.id;
      this.fileList=[file];
    },
    submitForms() { // 新增表单提交
      this.dialogFormVisible = false;
      const formData = new FormData();
      const {id,file} = this.addForm;
      if(file==='') return alert('请选择头像')
      formData.append('file',file);
      formData.append('id',id);
      uploadAvatar(formData).then(newAvatarUrl=>{
        this.sAdmin.avatar = newAvatarUrl;
        localStorage.setItem('sAdmin',JSON.stringify(this.sAdmin));
        this.fileList.splice(0,1)
      })

    },
    //修改密码
    submitFormPwd(){
      const {username,id }= this.sAdmin;
      const {confirmPassword,password,oldPassword} = this.formPwd;

      if (password !==confirmPassword){
        this.$message.error("两次输入的密码不一致")
        return false
      }
        updatePwd({
            id,
            username,
            password,
            oldPassword
        }).then(res=>{
          const {message} = res;
          if (res.code === 200) {
            this.updatePwdDialogFormVisible  = false;
            return this.$message({
              type: "success",
              message
            })
          } else {
            return this.$message({
              type: "error",
              message
            });
          }
        })


    },
    avatar(){
      this.dialogFormVisible = true//打开弹窗
    },
    openUpdateDialog(){
      Object.assign(this.formPwd,
        {
          oldPassword: '',
          password: '',
          confirmPassword:'',
        });
      this.updatePwdDialogFormVisible = true;

    }

  },
}
</script>

<style scoped>
.header{
  position: relative;
  background-color: dimgray;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: #ffffff;
}

.collapse-btn{
  float: left;
  padding: 0 21px;
  cursor: pointer;
  line-height: 70px;
}

.header .logo{
  float: left;
  line-height: 70px;
}

.header-right{
  float: right;
  padding-right: 50px;
  display:flex;
  height: 70px;
  align-items: center;
}

.btn-fullscreen{
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}

.user-avator{
  margin-left: 20px;
}

.user-avator img{
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-name{
  margin-left: 10px;
}

.el-dropdown-link{
  color: #ffffff;
  cursor: pointer;
}

</style>
